<template>
    <a-row>
        <div class="left">
            <BorderBox13 class="border-box">
                <LeftTopBarComp></LeftTopBarComp>
            </BorderBox13>
            <BorderBox13 class="border-box" style="margin-top: 10px">
                <LeftBottomBarComp></LeftBottomBarComp>
            </BorderBox13>
        </div>
        <div class="center" style="padding: 0 10px">
            <BorderBox10 class="border-box">
                <TopBarComp></TopBarComp>
            </BorderBox10>
            <BorderBox8 class="border-box" style="margin: 10px 0">
                <CenterBarComp></CenterBarComp>
            </BorderBox8>
            <BorderBox10 class="border-box">
                <BottomBarComp></BottomBarComp>
            </BorderBox10>
        </div>
        <div class="right">
            <BorderBox13 class="border-box">
                <RightTopBarComp></RightTopBarComp>
            </BorderBox13>
            <BorderBox13 class="border-box" style="margin-top: 10px">
                <RightBottomBarComp></RightBottomBarComp>
            </BorderBox13>
        </div>
    </a-row>
</template>

<script lang="ts">
import { BorderBox8, BorderBox10, BorderBox11, BorderBox13 } from '@kjgl77/datav-vue3'
import { defineComponent } from 'vue'

import TopBarComp from './comps/top-bar/index.vue'
import RightTopBarComp from './comps/right-top-bar/index.vue'
import BottomBarComp from './comps/bottom-bar/index.vue'
import LeftTopBarComp from './comps/left-top-bar/index.vue'
import CenterBarComp from './comps/center-bar/index.vue'
import RightBottomBarComp from './comps/right-bottom-bar/index.vue'
import LeftBottomBarComp from './comps/left-bottom-bar/index.vue'

export default defineComponent({
    name: 'Sales',
    components: {
        BorderBox8,
        BorderBox10,
        BorderBox11,
        BorderBox13,

        TopBarComp,
        RightTopBarComp,
        RightBottomBarComp,
        BottomBarComp,
        LeftTopBarComp,
        LeftBottomBarComp,
        CenterBarComp
    },
    setup() {
        return {}
    }
})
</script>
<style lang="scss" scoped>
.left,
.right {
    height: 100%;
    width: 500px;
}
.center {
    height: 100%;
    flex: 1;
}
.border-box {
    padding: 10px;
    color: #ffffff;
}
</style>
